<!DOCTYPE html>
<html>
<head>
    <style>
         object {
            border: 2px dashed maroon;
            padding: 3px;
        }

        .object1 {
            height: auto;
            width: auto;
        }

        .object2 {
            height: 220px;
            width: 220px;
        }
    </style>
</head>
<body onload="runAfterLayoutAndPaint(repaintTest, true);">
    <!-- All objects need to look identical -->
    <object class="object1" data="resources/circle.svg"></object>
    <object class="object2" data="resources/circle.svg"></object>

    <!-- After zooming the circles should still fill the boxes, it remains the same image as before, just smaller as whole -->
    <script>var zoomCount = 2; window.shouldZoomOut = true;</script>
    <script src="../../../resources/run-after-layout-and-paint.js"></script>
    <script src="../resources/testPageZoom.js"></script>
</body>
</html>
